<template>
  <div class="home">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="table-w">
            <div class="title">今日出库登记列表</div>
            <el-table
              :data="outstorageList"
              :row-style="tableRowStyle"
              :header-cell-style="tableHeaderColor"
              highlight-current-row
              @row-click="rowClick"
              style="width: 100%;font-size:26px"
              height="14rem"
            >
              <el-table-column prop="RegisterDate" label="登记时间" width="80" align="center">
                <template slot-scope="scope">{{$moment(scope.row.RegisterDate).format('HH:mm:ss')}}</template>
              </el-table-column>
              <el-table-column prop="CustomerName" label="外协单位" align="center"></el-table-column>
              <el-table-column prop="TotalWeight" label="总重量（克）" width="120" align="center"></el-table-column>
              <el-table-column prop="TotalCount" label="总数量（片）" width="120" align="center"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="buts">
            <el-button
              type="primary"
              class="button"
              :class="cuttingList.length > 0 ? 'active': ''"
              @click="swipeTagShow = true"
            >扫一扫</el-button>
          </div>
          <div class="cutting-w">
            <el-table
              :data="cuttingList"
              :row-style="tableRowStyle"
              :header-cell-style="tableHeaderColor"
              highlight-current-row
              style="width: 100%;font-size:26px"
              height="13rem"
            >
              <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="CustomerName" label="客户名称" width="180" align="center"></el-table-column>
              <el-table-column prop="StyleName" label="款式名称" align="center"></el-table-column>
              <el-table-column prop="SpecConfigName" label="尺码" width="120" align="center"></el-table-column>
              <el-table-column prop="ColorConfigName" label="颜色" width="120" align="center"></el-table-column>
              <el-table-column prop="DetailExtend3" label="部位" width="120" align="center"></el-table-column>
              <el-table-column prop="DetailExtend1" label="裁片" width="120" align="center"></el-table-column>
              <el-table-column prop="CuttingWeight" label="重量（克）" width="120" align="center">
                <template slot-scope="scope">
                  {{Number(scope.row.CuttingWeight).toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column prop="StockCount" label="数量（片）" width="120" align="center"></el-table-column>
              <el-table-column prop="TargetCuttingCount" label="确认数量（片）" width="120" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.TargetCuttingCount" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="60" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="delClick(scope.$index, cuttingList)"
                    type="text"
                    size="small"
                  >移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="buts">
            <div class="block">
              <span class="tit">外协单位：{{selCustomer.CustomerName}}</span>
              <el-button
                type="primary"
                class="button"
                :class="selCustomer.FlnkID ? 'active': ''"
                style="margin-left:10px"
                @click="handleCustomer()"
              >选择</el-button>
            </div>
            <div class="block">
              <span class="tit">预计返回日期：</span>
              <el-date-picker v-model="rebackDate" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
            </div>
            <el-button type="primary" class="button" @click="saveForeignCuttingOutStock()" v-if="showBtn">出库</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 外协单位列表 -->
    <div class="menuModalBox-w" v-show="dialogShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogShow = false" />
        </div>
        <div class="block-w">
          <div
            class="block"
            v-for="(item,index) in customerList"
            :key="index"
            @click="selectCustomer(item)"
          >
            <div class="block-top">{{item.CustomerName}}</div>
            <div class="block-bot">
              <span>{{item.CustomerShort}}</span>
              <span>{{item.Contacts}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 扫描标签二维码 -->
    <div class="menuModalBox-w" v-show="swipeTagShow" @click="$refs.swipeTag.focus()">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="swipeTagShow = false" />
        </div>
        <div class="info">{{swipeTagText}}</div>
        <input
          type="text"
          ref="swipeTag"
          @keyup.enter="swipeTagEnter"
          v-model="swipeTag"
          style="opacity: 0z-index=-1"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {getKCNumber} from '@/api/instorage'
import {getForeignCuttingStockByID, getForeignCustomerListBySpell, getForeignCuttingRegister, getForeignCuttingDetail, saveForeignCuttingOutStock} from '@/api/outsource'
export default {
  name: 'outstorage',
  data () {
    return {
      dialogShow: false,
      outstorageList: [],
      cuttingList: [],
      rebackDate: '',
      customerList: [],
      swipeTag: '',
      swipeTagShow: false,
      swipeTagText: '请扫描物料标签',
      selCustomer: '',
      registerID: '',
      selDetail: '',
      showBtn: true,
      pickerOptions: {
        disabledDate (v) {
          return v.getTime() < new Date().getTime() - 86400000
        }
      }
    }
  },
  computed: {},
  components: {},
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 公共接口-搜索外协单位客户列表
    getForeignCustomerListBySpell () {
      let vm = this
      let params = new FormData()
      params.append('Spell', '')
      getForeignCustomerListBySpell(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
        }
      })
    },
    // 标签扫描完成触发
    swipeTagEnter () {
      let vm = this
      vm.initData()// 将选中信息置空

      let params = new FormData()
      params.append('ID', vm.swipeTag)
      getForeignCuttingStockByID(params).then((response) => {
        if (response.data.result) {
          if (
              response.data.data &&
              response.data.data.length &&
              response.data.data.length > 0
            ) {
            response.data.data.map((item) => {
              item.TargetCuttingCount = item.StockCount
            })
          }
          vm.cuttingList = response.data.data
          vm.$message('刷卡成功')
        }
      })
      vm.showBtn = true
      vm.swipeTagShow = false
    },
    selectCustomer (row) {
      let vm = this
      vm.selCustomer = row
      vm.dialogShow = false
    },
    // 外协片-读取外协片出库登记列表
    getForeignCuttingRegister () {
      let vm = this
      let params = new FormData()
      params.append('RegisterType', 0)
      params.append('StartDate', '')
      params.append('EndDate', '')
      getForeignCuttingRegister(params).then((response) => {
        if (response.data.result) {
          vm.outstorageList = response.data.data
        }
      })
    },
    // 移出
    delClick (index, rows) {
      rows.splice(index, 1)
    },
    // 外协片-读取外协片出入库登记明细
    getForeignCuttingDetail () {
      let vm = this
      let params = new FormData()
      params.append('RegisterFlnkID', vm.selDetail.FlnkID)
      getForeignCuttingDetail(params).then((response) => {
        if (response.data.result) {
          vm.cuttingList = response.data.data
        }
      })
    },
    // 读取入库单
    async getKCNumber () {
      let vm = this
      let params = {
        ShortName: 'CW'
      }
      await getKCNumber(params).then((response) => {
        if (response.data) {
          vm.registerID = response.data
        }
      })
    },
    // 外协片-总仓到外协库调拨记账(出库)
    async saveForeignCuttingOutStock () {
      let vm = this
      if (vm.cuttingList.length === 0) {
        vm.$message('请扫描物料标签获取登记信息')
        return
      }
      if (vm.selCustomer === '') {
        vm.$message('请选择外协单位')
        return
      }
      if (vm.rebackDate === '') {
        vm.$message('请选择回收日期')
        return
      }
      await vm.getKCNumber()
      let detail = []
      vm.cuttingList.map((item) => {
        detail.push({
          FlnkID: item.FlnkID,
          RegisterFlnkID: vm.selDetail.FlnkID
            ? vm.selDetail.FlnkID
            : '00000000-0000-0000-0000-000000000000',
          OldStockFlnkID: item.OldStockFlnkID,
          TargetStockFlnkID: item.TargetStockFlnkID,
          OldCuttingCount: item.StockCount,
          TargetCuttingCount: item.TargetCuttingCount
        })
      })
      let params = {
        FlnkID: vm.selDetail.FlnkID ? vm.selDetail.FlnkID : '00000000-0000-0000-0000-000000000000',
        RegisterID: vm.registerID,
        CustomerFlnkID: vm.selCustomer.FlnkID,
        RebackDate: vm.rebackDate,
        OperFlnkID: vm.getLocalStorage('UserFlnkID'),
        Detail: detail
      }
      saveForeignCuttingOutStock(params).then((response) => {
        if (response.data.result) {
          vm.outstorageList = response.data.data
          vm.getForeignCuttingRegister()
          vm.cuttingList = []
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    // 点击选择外协单位
    handleCustomer () {
      let vm = this
      vm.dialogShow = true
      vm.getForeignCustomerListBySpell()
    },
    // 点击行
    rowClick (row) {
      let vm = this
      vm.showBtn = false
      vm.selDetail = row
      vm.getForeignCuttingDetail()
      vm.selCustomer = {
        FlnkID: row.CustomerFlnkID,
        CustomerName: row.CustomerName
      }
      vm.rebackDate = row.RebackDate
    },
    initData () {
      let vm = this
      vm.selCustomer = ''
      vm.selDetail = ''
      vm.rebackDate = ''
      vm.cuttingList = []
    }
  },
  watch: {
    swipeTagShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.swipeTag.focus()
        })
      }
    }
  },
  mounted () {
    let vm = this
    vm.getForeignCuttingRegister()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/outsource/outstorage.scss";
</style>
<style lang="scss">
.el-table__fixed-right::before, .el-table__fixed::before{
    display: none;
}
</style>
